<template>
  <div>
    <div class="con">
      <el-row :gutter="20">
        <el-col :span="8">
          <img  alt="" @click="goHome" style="height:40px"  src="../assets/images/logos.png" >
        </el-col>
        <!--<el-col :span="6">
          <p><el-button size="mini">坐席登入</el-button><el-button size="mini">坐席退出</el-button></p>
        </el-col>-->
        <div style="float: right;">
          <p>
            <el-button v-if="kefuLoginFlag == false" size="mini" type="success" style="border-radius: 66px" @click="loginKF">坐席登入</el-button>
            <el-button v-if="kefuLoginFlag == true" size="mini" type="danger" style="border-radius: 66px" @click="logoutKF">坐席退出</el-button>
            <span class="exit_btn"> 欢迎您: {{userName}}   登陆帐号: {{userCode}}   &nbsp;&nbsp;
                 <i @click="editPas">修改密码</i><i @click="exit">退出登录</i></span></p>

        </div>
      </el-row>
    </div>
    <el-dialog title="提示" :visible.sync="tipShow" :close-on-click-modal="false" :show-close="false" style="height: 412px;">
      <el-row :gutter="20">
        <div style="text-align: center;color: red;">
          <h3>{{updatePwdMessage}}</h3>
        </div>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="mustUpdate" size="small">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="dialogAddSta" :close-on-click-modal="false" :show-close="showClo">
      <el-form :model="editData" label-width="100px" :rules="roules" ref="ruleForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="oldPas" label="旧密码">
              <el-input type="password" v-model.trim="editData.oldPas" autocomplete="off" size="small" class="searchInp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="newPas" label="新密码">
              <el-input type="password" v-model.trim="editData.newPas" autocomplete="off" size="small" class="searchInp"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="confirmPas" label="确认新密码">
              <el-input type="password" v-model.trim="editData.confirmPas" autocomplete="off" size="small" class="searchInp"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="showClo" @click="dialogAddSta = false" size="small">取 消</el-button>
        <el-button type="primary" @click="editYes" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      var validatePas = (rule, value, callback) => {
        console.log(value, this.editData.newPas)
        if (!value) {
          return callback(new Error('请再次输入新密码'))
        }
        if (value != this.editData.newPas) {
          return callback(new Error('两次输入密码不一致'))
        }
        return callback()
      }
      return {
        showClo: true, //是否显示关闭按钮，强制修改时，置为false
        updatePwdMessage: "",
        tipShow: false,
        dialogAddSta: false,
        userName: '',
        userCode: '',
        editData: {
          oldPas: '',
          newPas: '',
          confirmPas: ''
        },
        roules: {
          oldPas: [{
            required: true,
            message: '请输入旧密码',
            trigger: 'blur'
          }, ],
          newPas: [{
              required: true,
              message: '请输入新密码',
              trigger: 'blur'
            },
            {
              pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/,
              message: '必须包含大小写字母和数字的组合，可以使用特殊字符，最少8位'
            }
          ],
          confirmPas: [{
            required: true,
            validator: validatePas,
            trigger: 'blur'
          }]
        },
        kefuLoginFlag: false,
      }
    },
    methods: {
      loginKF(){
        this.$message.success("坐席登录成功！")
        this.kefuLoginFlag = true;
      },
      logoutKF(){
        this.$message.success("坐席退出！")
        this.kefuLoginFlag = false;
      },
      editYes() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            const data = {
              oldPassword: this.$md5(this.editData.oldPas),
              password: this.$md5(this.editData.newPas),
              id: localStorage.getItem('USER_ID')
            };
            this.$request.put('/IAM/user/updatePassword', data, (res) => {
              if (res.code == '200') {
                this.$message({
                  showClose: true,
                  message: "密码修改成功",
                  type: 'success'
                });
                this.dialogAddSta = false;
                localStorage.clear();
                this.$router.push('/login')
              }
            })
          } else {
            return false;
          }
        })
      },
      editPas() {
        this.editData.oldPas = '';
        this.editData.newPas = '';
        this.editData.confirmPas = '';
        this.dialogAddSta = true;
        this.$nextTick(() => {
          this.$refs.ruleForm.resetFields();
        })
      },
      exit() {
        let userCode = localStorage.getItem('USER_CODE')
        localStorage.clear()
        sessionStorage.clear()
        this.$store.state.options = [{
          name: '首页',
          route: '/'
        }]
        this.$store.state.activeIndex = '/'
        this.$axios({
            method: "get",
            url: `/IAM/api/loginout`,
            data: "",
            params: {
              userCode: userCode,
            },
          })
          .then((res) => {
            this.$router.push({
              path: '/login'
            })
          });

      },
      goHome() {
        this.$router.push({
          path: '/'
        })
      },
      needUpdatePwd() {
        const data = {
          userid: localStorage.getItem("USER_ID"),
        };

        this.$requestA.get('/IAM/confirm/updatePwd', data, (res) => {
          if (res.code == '200') {
            if (res.data.need == "1") { //提示强制修改密码原因
              this.updatePwdMessage = res.data.msg;
              this.tipShow = true;
            }
          }
        })
      },
      mustUpdate() {
        this.tipShow = false;
        this.showClo = false;
        this.editPas();
      },

    },
    created() {
      this.userName = localStorage.getItem('User_Name');
      this.userCode = localStorage.getItem('USER_CODE');
      this.needUpdatePwd();

    },
  }
</script>

<style scoped>
  .con {
    padding-top: 7px;
    padding-left: 36px;
    padding-right: 36px;
  }

  .con img {
    height: 34px;
    cursor: pointer;
  }

  .exit_btn {
    float: right;
    padding-top: 6px;
    color: #0d78be;
    cursor: pointer;
    margin-left: 20px;
  }

  .exit_btn i {
    font-style: normal;
  }

  .exit_btn i:last-child {
    margin-left: 20px;
  }

  .zZindex {
    z-index: 3000 !important;
  }
</style>
